<template>
  <div class="meetingAll">
    <div class="meeting">
      <div class="title">OpenHarmony 会议日历</div>
      <div class="calendar">
        <!-- pc端 -->
        <div class="cal">
          <el-calendar v-model="currentTime">
            <template slot="dateCell" slot-scope="{ data }">
              <p
                v-if="
                  data.day
                    .split('-')
                    .slice(2)
                    .join('-') < 10
                "
              >
                {{
                  data.day
                    .split("-")
                    .slice(2)
                    .join("-")
                    .slice(1)
                }}
              </p>
              <p v-else>
                {{
                  data.day
                    .split("-")
                    .slice(2)
                    .join("-")
                }}
              </p>
              <template>
                <div class="conten">
                  <div v-for="(item, index) in list" :key="index">
                    <template>
                      <!-- 月和日都小于10 -->
                      <div
                        v-if="
                          data.day
                            .split('-')
                            .slice(2)
                            .join('') < 10 &&
                            data.day
                              .split('-')
                              .slice(1, 2)
                              .join('') < 10
                        "
                      >
                        <div
                          v-if="
                            data.day
                              .substring(0, data.day.indexOf('-') + 1)
                              .concat(
                                data.day
                                  .split('-')
                                  .slice(1, 2)
                                  .join('-')
                                  .slice(1)
                              )
                              .concat('-')
                              .concat(
                                data.day
                                  .split('-')
                                  .slice(2)
                                  .join('-')
                                  .slice(1)
                              ) == item.date
                          "
                          class="conT"
                        >
                          <div v-if="item.data.length > 0" class="conT1">
                            <div class="conT1-1">
                              {{
                                item.data[0].startTime +
                                  "-" +
                                  item.data[0].endTime
                              }}
                            </div>
                            <div v-if="isNameShow" class="conT1-2">
                              {{ item.data[0].name }}
                            </div>
                          </div>
                          <div class="conT2">
                            <div @click="getMore(item.date)">
                              更多<span>></span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- 日小于10 -->
                      <div
                        v-else-if="
                          data.day
                            .split('-')
                            .slice(2)
                            .join('') < 10
                        "
                      >
                        <div
                          v-if="
                            data.day
                              .substring(0, data.day.lastIndexOf('-') + 1)
                              .concat(
                                data.day
                                  .split('-')
                                  .slice(2)
                                  .join('-')
                                  .slice(1)
                              ) == item.date
                          "
                          class="conT"
                        >
                          <div v-if="item.data.length > 0" class="conT1">
                            <div class="conT1-1">
                              {{
                                item.data[0].startTime +
                                  "-" +
                                  item.data[0].endTime
                              }}
                            </div>
                            <div v-if="isNameShow" class="conT1-2">
                              {{ item.data[0].name }}
                            </div>
                          </div>
                          <div class="conT2">
                            <div @click="getMore(item.date)">
                              更多<span>></span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- 月小于10 -->
                      <div
                        v-else-if="
                          data.day
                            .split('-')
                            .slice(1, 2)
                            .join('') < 10
                        "
                      >
                        <div
                          v-if="
                            data.day
                              .substring(0, data.day.indexOf('-') + 1)
                              .concat(
                                data.day
                                  .split('-')
                                  .slice(1, 2)
                                  .join('-')
                                  .slice(1)
                              )
                              .concat('-')
                              .concat(
                                data.day
                                  .split('-')
                                  .slice(2)
                                  .join('-')
                              ) == item.date
                          "
                          class="conT"
                        >
                          <div v-if="item.data.length > 0" class="conT1">
                            <div class="conT1-1">
                              {{
                                item.data[0].startTime +
                                  "-" +
                                  item.data[0].endTime
                              }}
                            </div>
                            <div v-if="isNameShow" class="conT1-2">
                              {{ item.data[0].name }}
                            </div>
                          </div>
                          <div class="conT2">
                            <div @click="getMore(item.date)">
                              更多<span>></span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- 月和日都大于10 -->
                      <div v-else>
                        <div v-if="data.day == item.date" class="conT">
                          <div v-if="item.data.length > 0" class="conT1">
                            <div class="conT1-1">
                              {{
                                item.data[0].startTime +
                                  "-" +
                                  item.data[0].endTime
                              }}
                            </div>
                            <div v-if="isNameShow" class="conT1-2">
                              {{ item.data[0].name }}
                            </div>
                          </div>
                          <div class="conT2">
                            <div @click="getMore(item.date)">
                              更多<span>></span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </template>
                  </div>
                </div>
              </template>
            </template>
          </el-calendar>
          <div v-show="dialogVisible" class="dialog">
            <el-dialog :visible.sync="dialogVisible">
              <div v-if="moreList.length > 0">
                <div
                  class="dialogItem"
                  v-for="meetItem in moreList[0].data"
                  :key="meetItem.id"
                >
                  <div class="title">
                    <span v-if="meetItem.label === 1"
                      ><img src="../../assets/images/onlineMeeting.png"
                    /></span>
                    <span v-else
                      ><img src="../../assets/images/offlineMeeting.png"
                    /></span>
                    <span>{{ meetItem.name }}</span>
                  </div>
                  <div class="time">
                    <span>{{ moreList[0].date }} </span>
                    <span>{{
                      meetItem.startTime + "--" + meetItem.endTime
                    }}</span>
                  </div>
                  <div class="describe">
                    <span>{{ meetItem.description }}</span>
                  </div>
                  <div v-if="meetItem.address" class="address">
                    <div class="btn-address"></div>
                    {{ meetItem.address }}
                  </div>
                  <div class="button">
                    <div
                      class="buttonItemHer"
                      :class="{ buttonItemAct: meetItem.attachmentUrl }"
                      @click="goMeeting(meetItem)"
                    >
                      <a>查看会议</a>
                    </div>
                    <div
                      @click="goMinutes(meetItem)"
                      class="buttonItemHer"
                      :class="{
                        buttonItem: meetItem.contentUrl && meetItem.flag,
                      }"
                    >
                      <a>会议纪要</a>
                    </div>
                    <div
                      @click="goVideo(meetItem)"
                      class="buttonItemHer"
                      :class="{
                        buttonItem: meetItem.recordUrl && meetItem.flag,
                      }"
                    >
                      <a>查看录像</a>
                    </div>
                  </div>
                  <div v-show="moreList[0].data.length > 1" class="line"></div>
                </div>
              </div>
            </el-dialog>
          </div>
        </div>
        <!-- 手机端 -->
        <div class="mobileCal">
          <el-calendar v-model="currentTime">
            <template slot="dateCell" slot-scope="{ data }">
              <p
                v-if="
                  data.day
                    .split('-')
                    .slice(2)
                    .join('-') < 10
                "
              >
                {{
                  data.day
                    .split("-")
                    .slice(2)
                    .join("-")
                    .slice(1)
                }}
              </p>
              <p v-else>
                {{
                  data.day
                    .split("-")
                    .slice(2)
                    .join("-")
                }}
              </p>
              <template>
                <div class="conten">
                  <div v-for="(item, index) in list" :key="index">
                    <template>
                      <!-- 月和日都小于10 -->
                      <div
                        v-if="
                          data.day
                            .split('-')
                            .slice(2)
                            .join('') < 10 &&
                            data.day
                              .split('-')
                              .slice(1, 2)
                              .join('') < 10
                        "
                      >
                        <div
                          v-if="
                            data.day
                              .substring(0, data.day.indexOf('-') + 1)
                              .concat(
                                data.day
                                  .split('-')
                                  .slice(1, 2)
                                  .join('-')
                                  .slice(1)
                              )
                              .concat('-')
                              .concat(
                                data.day
                                  .split('-')
                                  .slice(2)
                                  .join('-')
                                  .slice(1)
                              ) == item.date
                          "
                          class="conT"
                          @click="getMobileMore(item.date)"
                        >
                          <div class="conT2">
                            <div></div>
                          </div>
                        </div>
                      </div>
                      <!-- 日小于10 -->
                      <div
                        v-else-if="
                          data.day
                            .split('-')
                            .slice(2)
                            .join('') < 10
                        "
                      >
                        <div
                          v-if="
                            data.day
                              .substring(0, data.day.lastIndexOf('-') + 1)
                              .concat(
                                data.day
                                  .split('-')
                                  .slice(2)
                                  .join('-')
                                  .slice(1)
                              ) == item.date
                          "
                          class="conT"
                          @click="getMobileMore(item.date)"
                        >
                          <div class="conT2">
                            <div></div>
                          </div>
                        </div>
                      </div>
                      <!-- 月小于10 -->
                      <div
                        v-else-if="
                          data.day
                            .split('-')
                            .slice(1, 2)
                            .join('') < 10
                        "
                      >
                        <div
                          v-if="
                            data.day
                              .substring(0, data.day.indexOf('-') + 1)
                              .concat(
                                data.day
                                  .split('-')
                                  .slice(1, 2)
                                  .join('-')
                                  .slice(1)
                              )
                              .concat('-')
                              .concat(
                                data.day
                                  .split('-')
                                  .slice(2)
                                  .join('-')
                              ) == item.date
                          "
                          class="conT"
                          @click="getMobileMore(item.date)"
                        >
                          <div class="conT2">
                            <div></div>
                          </div>
                        </div>
                      </div>
                      <!-- 月和日都大于10 -->
                      <div v-else>
                        <div
                          v-if="data.day == item.date"
                          class="conT"
                          @click="getMobileMore(item.date)"
                        >
                          <div class="conT2">
                            <div></div>
                          </div>
                        </div>
                      </div>
                    </template>
                  </div>
                </div>
              </template>
            </template>
          </el-calendar>
          <div v-show="mobileDialog" class="dialog">
            <el-dialog :visible.sync="mobileDialog">
              <div v-if="moreList.length > 0">
                <div
                  class="dialogItem"
                  v-for="meetItem in moreList[0].data"
                  :key="meetItem.id"
                >
                  <div class="title">
                    <span v-if="meetItem.label === 1"
                      ><img src="../../assets/images/onlineMeeting.png"
                    /></span>
                    <span v-else
                      ><img src="../../assets/images/offlineMeeting.png"
                    /></span>
                    <span>{{ meetItem.name }}</span>
                  </div>
                  <div class="time">
                    <span>{{ moreList[0].date }} </span>
                    <span>{{
                      meetItem.startTime + "--" + meetItem.endTime
                    }}</span>
                  </div>
                  <div class="describe">
                    <span>{{ meetItem.description }}</span>
                  </div>
                  <div v-if="meetItem.address" class="address">
                    {{ meetItem.address }}
                  </div>
                  <div class="button">
                    <div
                      class="buttonItemHer"
                      :class="{ buttonItemAct: meetItem.attachmentUrl }"
                      @click="goMeeting(meetItem)"
                    >
                      <a>查看会议</a>
                    </div>
                    <div
                      @click="goMinutes(meetItem)"
                      class="buttonItemHer"
                      :class="{
                        buttonItem: meetItem.contentUrl && meetItem.flag,
                      }"
                    >
                      <a>会议纪要</a>
                    </div>
                    <div
                      @click="goVideo(meetItem)"
                      class="buttonItemHer"
                      :class="{
                        buttonItem: meetItem.recordUrl && meetItem.flag,
                      }"
                    >
                      <a>查看录像</a>
                    </div>
                  </div>
                  <div v-show="moreList[0].data.length > 1" class="line"></div>
                </div>
              </div>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import moment from "moment";
export default {
  data() {
    return {
      isNameShow: true,
      screenWidth: document.body.clientWidth,
      currentTime: new Date(),
      dialogVisible: false,
      mobileDialog: false,
      moon: 0,
      moreTime: "",
      moreMinute: "",
    };
  },
  computed: {
    ...mapState({
      list: (state) => state.meeting.meetingList,
      moreList: (state) => state.meeting.moreList,
    }),
  },
  watch: {
    screenWidth(newVal) {
      if (newVal < 1032) this.isNameShow = false;
      else this.isNameShow = true;
    },
  },
  created() {
    this.getMeetingData({
      date: moment(this.currentTime).format("YYYY-MM"),
    });

    if (this.screenWidth < 1032) this.isNameShow = false;
    else this.isNameShow = true;
  },
  mounted() {
    //pc端点击事件
    // console.log(
    //   moment(currentTime).format("YYYY-MM-DD") === moreList[0].date &&
    //     moment(currentTime).format("hh:mm") == meetItem.startTime
    // );
    //获取上个月数据
    this.$nextTick(() => {
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(1)"
      );
      prevBtn.addEventListener("click", (e) => {
        let arr = moment(this.currentTime)
          .format("YYYY-MM")
          .split("");
        let str = arr.splice(-2, 1);
        let newVal = arr.join("");
        console.log("arr", arr.join(""), str[0]);
        if (str[0] != 0) {
          this.getMeetingData({
            date: moment(this.currentTime).format("YYYY-MM"),
          });
        } else {
          console.log("我是0");
          this.getMeetingData({
            date: newVal,
          });
        }
      });
    });
    //获取今天数据
    this.$nextTick(() => {
      let todayBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(2)"
      );
      todayBtn.addEventListener("click", (e) => {
        let arr = moment(this.currentTime)
          .format("YYYY-MM")
          .split("");
        let str = arr.splice(-2, 1);
        let newVal = arr.join("");
        console.log("arr", arr.join(""), str[0]);
        if (str[0] != 0) {
          this.getMeetingData({
            date: moment(this.currentTime).format("YYYY-MM"),
          });
        } else {
          console.log("我是0");
          this.getMeetingData({
            date: newVal,
          });
        }
      });
      console.log();
    });
    //获取下个月数据
    this.$nextTick(() => {
      let nextBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(3)"
      );
      nextBtn.addEventListener("click", (e) => {
        let arr = moment(this.currentTime)
          .format("YYYY-MM")
          .split("");
        let str = arr.splice(-2, 1);
        let newVal = arr.join("");
        console.log("arr", arr.join(""), str[0]);
        if (str[0] != 0) {
          this.getMeetingData({
            date: moment(this.currentTime).format("YYYY-MM"),
          });
        } else {
          console.log("我是0");
          this.getMeetingData({
            date: newVal,
          });
        }
      });
    });
    //移动端点击事件
    this.$nextTick(() => {
      let prevMoBtn = document.querySelector(
        ".mobileCal .el-calendar__button-group .el-button-group>button:nth-child(1)"
      );
      prevMoBtn.addEventListener("click", (e) => {
        let arr = moment(this.currentTime)
          .format("YYYY-MM")
          .split("");
        let str = arr.splice(-2, 1);
        let newVal = arr.join("");
        console.log("arr", arr.join(""), str[0]);
        if (str[0] != 0) {
          this.getMeetingData({
            date: moment(this.currentTime).format("YYYY-MM"),
          });
        } else {
          console.log("我是0");
          this.getMeetingData({
            date: newVal,
          });
        }
      });
    });
    this.$nextTick(() => {
      let todayMoBtn = document.querySelector(
        ".mobileCal .el-calendar__button-group .el-button-group>button:nth-child(2)"
      );
      todayMoBtn.addEventListener("click", (e) => {
        let arr = moment(this.currentTime)
          .format("YYYY-MM")
          .split("");
        let str = arr.splice(-2, 1);
        let newVal = arr.join("");
        console.log("arr", arr.join(""), str[0]);
        if (str[0] != 0) {
          this.getMeetingData({
            date: moment(this.currentTime).format("YYYY-MM"),
          });
        } else {
          console.log("我是0");
          this.getMeetingData({
            date: newVal,
          });
        }
      });
    });
    this.$nextTick(() => {
      let nextMoBtn = document.querySelector(
        ".mobileCal .el-calendar__button-group .el-button-group>button:nth-child(3)"
      );
      nextMoBtn.addEventListener("click", (e) => {
        let arr = moment(this.currentTime)
          .format("YYYY-MM")
          .split("");
        let str = arr.splice(-2, 1);
        let newVal = arr.join("");
        console.log("arr", arr.join(""), str[0]);
        if (str[0] != 0) {
          this.getMeetingData({
            date: moment(this.currentTime).format("YYYY-MM"),
          });
        } else {
          console.log("我是0");
          this.getMeetingData({
            date: newVal,
          });
        }
      });
    });
    window.addEventListener("resize", () => this.meetScreenWidth(), false);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.meetScreenWidth(), false);
  },
  methods: {
    ...mapActions(["getMeetingData", "getMoreData"]),
    getMore(dat) {
      this.dialogVisible = true;
      this.moreTime = dat;
      let time = moment(this.currentTime).format("hh:mm");
      this.moreMinute = time.split(":")[0] * 60 + time.split(":")[1] * 60;
      console.log("更多时间", this.moreTime);
      // this.getMeetingData({
      //   date: dat.slice(0, dat.lastIndexOf("-")),
      // });
      console.log(dat);
      this.getMoreData({
        date: dat.slice(0, dat.lastIndexOf("-")),
        currentDate: dat,
      });
    },
    getMobileMore(dat) {
      this.mobileDialog = true;
      // this.getMeetingData({
      //   date: dat.slice(0, dat.lastIndexOf("-")),
      // });
      this.getMoreData({
        date: dat.slice(0, dat.lastIndexOf("-")),
        currentDate: dat,
      });
      console.log(dat);
    },
    // 会议
    goMeeting(meetItem) {
      let u = navigator.userAgent;
      let isIos = !!u.match(/\(i[^;]+;(U;)? CPU.+Mac OS X/);
      if (meetItem.attachmentUrl) {
        if (isIos) {
          window.location.href = meetItem.attachmentUrl;
        } else {
          window.open(meetItem.attachmentUrl);
        }
      }
    },
    // 纪要
    goMinutes(meetItem) {
      let u = navigator.userAgent;
      let isIos = !!u.match(/\(i[^;]+;(U;)? CPU.+Mac OS X/);
      if (meetItem.flag && meetItem.contentUrl) {
        if (isIos) {
          window.location.href = meetItem.contentUrl;
        } else {
          window.open(meetItem.contentUrl);
        }
      }
    },
    // 录像
    goVideo(meetItem) {
      let u = navigator.userAgent;
      let isIos = !!u.match(/\(i[^;]+;(U;)? CPU.+Mac OS X/);
      if (meetItem.flag && meetItem.recordUrl) {
        if (isIos) {
          window.location.href = meetItem.recordUrl;
        } else {
          window.open(meetItem.recordUrl);
        }
      }
    },

    meetScreenWidth() {
      window.screenWidth = document.body.clientWidth;
      this.screenWidth = window.screenWidth;
    },
  },
};
</script>
<style lang="less" scoped>
@media screen and (min-width: 1032px) {
  .meetingAll {
    width: 100%;
    background: #fafafa url("../../assets/images/calendar.png") no-repeat top
      center/1920px;
    padding-bottom: 80px;
    .meeting {
      width: 1032px;
      margin: 0 auto;
      .title {
        padding: 80px 0 32px;
        height: 56px;
        line-height: 56px;
        font-size: 40px;
        font-family: HarmonyOS_Sans_SC_Medium;
        color: rgba(0, 0, 0, 0.9);
      }
      .calendar {
        width: 100%;
        width: 100%;
        .mobileCal {
          display: none;
        }
        .cal {
          display: block;
          // 日历主体
          margin: 0 auto;
          ::v-deep .el-calendar-table {
            .current:hover {
              background-color: #f2f8fe;
            }
            .el-calendar-day {
              width: 143px;
              height: 143px;
              padding: 8px 13px;
              position: relative;
              p {
                font-size: 16px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                color: rgba(0, 0, 0, 0.85);
                line-height: 19px;
                padding-left: 8px;
                margin-bottom: 17px;
              }
              .conT {
                font-size: 12px;
                .conT1-1 {
                  font-family: PingFangSC-Medium, PingFang SC;
                  font-weight: 500;
                  color: rgba(0, 0, 0, 0.9);
                  line-height: 17px;
                  position: relative;
                  padding-left: 12px;
                  margin-bottom: 6px;
                  &::before {
                    content: "";
                    width: 6px;
                    height: 6px;
                    background: linear-gradient(
                      90deg,
                      #00a6f9 0%,
                      #81bd0a 100%
                    );
                    box-shadow: 0px 2px 4px 0px rgba(13, 169, 226, 0.24),
                      1px 1px 2px 0px rgba(255, 255, 255, 0.33);
                    border-radius: 50%;
                    position: absolute;
                    left: 0px;
                    top: 30%;
                  }
                }
                .conT1-2 {
                  font-family: PingFang-SC-Regular, PingFang-SC;
                  font-weight: 400;
                  color: rgba(0, 0, 0, 0.65);
                  line-height: 17px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-box-pack: center;
                  -webkit-box-align: center;
                  -webkit-line-clamp: 2;
                  white-space: pre-wrap;
                  word-break: break-all;
                  overflow: hidden;
                }
                .conT2 {
                  position: absolute;
                  right: 13px;
                  bottom: 12px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: rgba(0, 0, 0, 0.45);
                  line-height: 17px;
                  span {
                    margin-left: 3px;
                  }
                  &:hover {
                    color: #00a6f9;
                  }
                }
              }
            }
          }
          // 日历头部
          ::v-deep .el-calendar__header {
            height: 68px;
            .el-calendar__button-group {
              display: flex;
              align-items: center;
              .el-button-group > button {
                width: 128px;
                height: 48px;
                font-size: 16px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.9);
                line-height: 22px;
              }
              .el-button-group > button:nth-child(1) {
                border-radius: 100px 0 0 100px;
              }
              .el-button-group > button:nth-child(3) {
                border-radius: 0 100px 100px 0;
              }
            }
          }

          ::v-deep .el-calendar {
            border-radius: 10px;
            .el-calendar__title {
              font-size: 24px;
              font-family: HarmonyOS_Sans_SC_Medium;
              color: rgba(0, 0, 0, 0.85);
              line-height: 33px;
            }
          }
          ::v-deep .el-calendar-table {
            .prev,
            .next {
              p {
                color: rgba(0, 0, 0, 0.45);
              }
            }
            .prev:hover {
              background-color: #f2f8fe;
            }
            .next:hover {
              background-color: #f2f8fe;
            }
          }
          // 弹出层
          .dialog {
            height: 100vh;
            // 改变滚动条样式
            ::-webkit-scrollbar {
              width: 4px;
              background: #f0f0f0;
            }
            ::-webkit-scrollbar-thumb {
              border-radius: 3px;
              height: 197px;
              background: #ccc;
              box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08);
            }
            .el-dialog__wrapper {
              display: flex;
              align-items: center;
              ::v-deep .el-dialog {
                width: 328px;
                min-height: 216px;
                max-height: 385px;
                overflow-y: auto;
                border-radius: 8px;
                margin-top: 0 !important;
                .el-dialog__header {
                  padding: 0;
                  .el-dialog__headerbtn {
                    display: none;
                  }
                }
              }
              ::v-deep .el-dialog__body {
                padding: 16px 16px 0 16px;
                .el-calendar-table {
                  tbody {
                    border-radius: 8px;
                    background-color: red;
                  }
                }
                .dialogItem {
                  .title {
                    height: 44px;
                    line-height: 22px;
                    font-size: 16px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: rgba(0, 0, 0, 0.85);
                    line-height: 22px;
                    padding: 0;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    img {
                      width: 64px;
                      height: 19px;
                      margin-right: 6px;
                      margin-top: -2px;
                    }
                  }
                  .time {
                    margin-top: 12px;
                    height: 16px;
                    font-size: 14px;
                    font-family: Roboto-Bold, Roboto;
                    font-weight: bold;
                    color: rgba(0, 0, 0, 0.85);
                    line-height: 16px;
                  }
                  .describe {
                    height: 40px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(0, 0, 0, 0.45);
                    line-height: 20px;
                    margin-top: 12px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                  .address {
                    margin-top: 12px;
                    margin-bottom: 24px;
                    display: flex;
                    .btn-address {
                      width: 14px;
                      height: 14px;
                      margin-right: 6px;
                      background: url("../../assets/images/btn-address.png")
                        no-repeat 100% 100%;
                    }
                  }
                  .button {
                    margin-top: 24px;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    button {
                      margin: 0;
                      padding: 0;
                      border: 0;
                      outline: none;
                    }
                    .buttonItemHer {
                      width: 88px;
                      height: 36px;
                      line-height: 36px;
                      background: rgba(0, 0, 0, 0.06);
                      border-radius: 24px;
                      text-align: center;
                      cursor: pointer;
                      a {
                        font-size: 14px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: rgba(0, 0, 0, 0.25);
                      }
                    }
                    .buttonItemAct {
                      width: 88px;
                      height: 36px;
                      line-height: 36px;
                      background: #00a6f9;
                      border-radius: 24px;
                      text-align: center;
                      cursor: pointer;
                      a {
                        font-size: 14px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #ffffff;
                      }
                    }
                    .buttonItem {
                      width: 88px;
                      height: 36px;
                      line-height: 36px;
                      background: rgba(0, 0, 0, 0.06);
                      border-radius: 24px;
                      text-align: center;
                      cursor: pointer;
                      a {
                        font-size: 14px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #00a6f9;
                      }
                    }
                  }
                  .line {
                    margin-top: 24px;
                    margin-bottom: 16px;
                    // width: 296px;
                    height: 1px;
                    background: #000000;
                    opacity: 0.06;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (min-width: 769px) and (max-width: 1031px) {
  .meetingAll {
    width: 100%;
    background: #fafafa url("../../assets/images/calendar.png") top center/768px;
    padding-bottom: 64px;
    .meeting {
      width: 768px;
      margin: 0 auto;
      .title {
        padding: 80px 0 32px 0;
        height: 56px;
        font-size: 40px;
        font-family: HarmonyOS_Sans_SC_Medium;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.9);
        line-height: 56px;
      }
      .calendar {
        width: 100%;
        width: 100%;
        .mobileCal {
          display: none;
        }
        .cal {
          display: block;
          // 日历主体
          margin: 0 auto;
          ::v-deep .el-calendar-table {
            .current:hover {
              background-color: #f2f8fe;
            }
            .el-calendar-day {
              width: 93px;
              height: 119px;
              padding: 9px 11px;
              position: relative;
              p {
                font-size: 16px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                color: rgba(0, 0, 0, 0.85);
                line-height: 19px;
                padding-left: 8px;
                margin-bottom: 17px;
              }
              .conT {
                font-size: 12px;
                .conT1-1 {
                  font-family: PingFangSC-Medium, PingFang SC;
                  font-weight: 500;
                  color: rgba(0, 0, 0, 0.9);
                  line-height: 17px;
                  position: relative;
                  padding-left: 12px;
                  margin-bottom: 6px;
                  &::before {
                    content: "";
                    width: 6px;
                    height: 6px;
                    background: linear-gradient(
                      90deg,
                      #00a6f9 0%,
                      #81bd0a 100%
                    );
                    box-shadow: 0px 2px 4px 0px rgba(13, 169, 226, 0.24),
                      1px 1px 2px 0px rgba(255, 255, 255, 0.33);
                    border-radius: 50%;
                    position: absolute;
                    left: 0px;
                    top: 30%;
                  }
                }
                .conT1-2 {
                  font-family: PingFang-SC-Regular, PingFang-SC;
                  color: rgba(0, 0, 0, 0.65);
                  line-height: 17px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-box-pack: center;
                  -webkit-box-align: center;
                  -webkit-line-clamp: 2;
                  white-space: pre-wrap;
                  word-break: break-all;
                  overflow: hidden;
                }
                .conT2 {
                  position: absolute;
                  right: 13px;
                  bottom: 12px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: rgba(0, 0, 0, 0.45);
                  line-height: 17px;
                  span {
                    margin-left: 3px;
                  }
                  &:hover {
                    color: #00a6f9;
                  }
                }
              }
            }
          }

          ::v-deep .el-calendar-table {
            .prev,
            .next {
              p {
                color: rgba(0, 0, 0, 0.45);
              }
            }
            .prev:hover {
              background-color: #f2f8fe;
            }
            .next:hover {
              background-color: #f2f8fe;
            }
          }

          // 日历头部
          ::v-deep .el-calendar__header {
            height: 68px;
            .el-calendar__button-group {
              display: flex;
              align-items: center;
              .el-button-group > button {
                width: 128px;
                height: 48px;
                font-size: 16px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.9);
                line-height: 22px;
              }
              .el-button-group > button:nth-child(1) {
                border-radius: 100px 0 0 100px;
              }
              .el-button-group > button:nth-child(3) {
                border-radius: 0 100px 100px 0;
              }
            }
          }

          ::v-deep .el-calendar {
            border-radius: 10px;
            .el-calendar__title {
              font-size: 24px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: rgba(0, 0, 0, 0.85);
              line-height: 33px;
            }
          }
          // 弹出层
          .dialog {
            height: 100vh;
            // 改变滚动条样式
            ::-webkit-scrollbar {
              width: 4px;
              background: #f0f0f0;
            }
            ::-webkit-scrollbar-thumb {
              border-radius: 3px;
              height: 197px;
              background: #ccc;
              box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08);
            }
            .el-dialog__wrapper {
              display: flex;
              align-items: center;
              ::v-deep .el-dialog {
                width: 328px;
                min-height: 216px;
                max-height: 385px;
                overflow-y: auto;
                border-radius: 8px;
                margin-top: 0 !important;
                .el-dialog__header {
                  padding: 0;
                  .el-dialog__headerbtn {
                    display: none;
                  }
                }
              }

              ::v-deep .el-dialog__body {
                padding: 16px 16px 0 16px;
                .el-calendar-table {
                  tbody {
                    border-radius: 8px;
                    background-color: red;
                  }
                }
                .dialogItem {
                  .title {
                    height: 44px;
                    line-height: 22px;
                    font-size: 16px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: rgba(0, 0, 0, 0.85);
                    line-height: 22px;
                    padding: 0;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    img {
                      width: 64px;
                      height: 19px;
                      margin-right: 6px;
                      margin-top: -2px;
                    }
                  }
                  .time {
                    margin-top: 12px;
                    height: 16px;
                    font-size: 14px;
                    font-family: Roboto-Bold, Roboto;
                    font-weight: bold;
                    color: rgba(0, 0, 0, 0.85);
                    line-height: 16px;
                  }
                  .describe {
                    height: 40px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(0, 0, 0, 0.45);
                    line-height: 20px;
                    margin-top: 12px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                  .address {
                    margin-top: 12px;
                    margin-bottom: 24px;
                    display: flex;
                    .btn-address {
                      width: 14px;
                      height: 14px;
                      margin-right: 6px;
                      background: url("../../assets/images/btn-address.png")
                        no-repeat 100% 100%;
                    }
                  }
                  .button {
                    margin-top: 24px;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    button {
                      margin: 0;
                      padding: 0;
                      border: 0;
                      outline: none;
                    }
                    .buttonItemHer {
                      width: 88px;
                      height: 36px;
                      line-height: 36px;
                      background: rgba(0, 0, 0, 0.06);
                      border-radius: 24px;
                      text-align: center;
                      cursor: pointer;
                      a {
                        font-size: 14px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: rgba(0, 0, 0, 0.25);
                      }
                    }
                    .buttonItemAct {
                      width: 88px;
                      height: 36px;
                      line-height: 36px;
                      background: #00a6f9;
                      border-radius: 24px;
                      text-align: center;
                      cursor: pointer;
                      a {
                        font-size: 14px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #ffffff;
                      }
                    }
                    .buttonItem {
                      width: 88px;
                      height: 36px;
                      line-height: 36px;
                      background: rgba(0, 0, 0, 0.06);
                      border-radius: 24px;
                      text-align: center;
                      cursor: pointer;
                      a {
                        font-size: 14px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #00a6f9;
                      }
                    }
                  }
                  .line {
                    margin-top: 24px;
                    margin-bottom: 16px;
                    // width: 296px;
                    height: 1px;
                    background: #000000;
                    opacity: 0.06;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .meetingAll {
    width: 100%;
    background: #fafafa url("../../assets/images/calendar.png") top center/100%;
    padding-bottom: 24px;
    .meeting {
      margin: 0 auto;
      .title {
        padding: 32px 0 16px 12px;
        height: 28px;
        font-size: 20px;
        font-family: HarmonyOS_Sans_SC_Medium;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.9);
        line-height: 28px;
      }
      .calendar {
        width: 100%;
        width: 100%;
        .cal {
          display: none;
        }
        .mobileCal {
          display: block;
          width: 100%;
          padding: 0 12px;
          box-sizing: border-box;
          ::v-deep
            .el-calendar__button-group
            .el-button-group
            > button:nth-child(1) {
            border-radius: 15px 0 0 15px;
          }
          ::v-deep .el-calendar {
            border-radius: 10px;
          }
          ::v-deep
            .el-calendar__button-group
            .el-button-group
            > button:nth-child(3) {
            border-radius: 0 15px 15px 0;
          }
          ::v-deep .el-calendar {
            background: #ffffff;
            .el-calendar__body .el-calendar-table {
              .el-calendar-table__row {
                height: 48px;
                .el-calendar-day {
                  height: 48px;
                  .conten {
                    .conT {
                      position: relative;
                      top: -18px;
                      width: 100%;
                      height: 32px;
                      .conT2 {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-end;
                        align-items: flex-end;
                        font-size: 12px;
                        font-weight: 400;
                        color: rgba(0, 0, 0, 0.45);
                        text-align: right;
                        div {
                          width: 6px;
                          height: 6px;
                          background: linear-gradient(
                            90deg,
                            #00a6f9 0%,
                            #81bd0a 100%
                          );
                          box-shadow: 0px 2px 4px 0px rgba(13, 169, 226, 0.24),
                            1px 1px 2px 0px rgba(255, 255, 255, 0.33);
                          border-radius: 50%;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
          // 弹出层
          .dialog {
            height: 100vh;
            // 改变滚动条样式
            ::-webkit-scrollbar {
              width: 4px;
              background: #f0f0f0;
            }
            ::-webkit-scrollbar-thumb {
              border-radius: 3px;
              height: 197px;
              background: #ccc;
              box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08);
            }
            .el-dialog__wrapper {
              display: flex;
              align-items: center;
              ::v-deep .el-dialog {
                width: 328px;
                min-height: 216px;
                max-height: 385px;
                overflow-y: auto;
                border-radius: 8px;
                margin-top: 0 !important;
                .el-dialog__header {
                  padding: 0;
                  .el-dialog__headerbtn {
                    display: none;
                  }
                }
              }
              ::v-deep .el-dialog__body {
                padding: 16px 16px 0 16px;
                .el-calendar-table {
                  tbody {
                    border-radius: 8px;
                    background-color: red;
                  }
                }
                .dialogItem {
                  .title {
                    height: 44px;
                    line-height: 22px;
                    font-size: 16px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: rgba(0, 0, 0, 0.85);
                    line-height: 22px;
                    padding: 0;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    img {
                      width: 64px;
                      height: 19px;
                      margin-right: 6px;
                      margin-top: -2px;
                    }
                  }
                  .time {
                    margin-top: 12px;
                    height: 16px;
                    font-size: 14px;
                    font-family: Roboto-Bold, Roboto;
                    font-weight: bold;
                    color: rgba(0, 0, 0, 0.85);
                    line-height: 16px;
                  }
                  .describe {
                    height: 40px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(0, 0, 0, 0.45);
                    line-height: 20px;
                    margin-top: 12px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                  .address {
                    margin-top: 12px;
                    margin-bottom: 24px;
                    display: flex;
                    .btn-address {
                      width: 14px;
                      height: 14px;
                      margin-right: 6px;
                      background: url("../../assets/images/btn-address.png")
                        no-repeat 100% 100%;
                    }
                  }
                  .button {
                    margin-top: 24px;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    button {
                      margin: 0;
                      padding: 0;
                      border: 0;
                      outline: none;
                    }
                    .buttonItemHer {
                      width: 88px;
                      height: 36px;
                      line-height: 36px;
                      background: rgba(0, 0, 0, 0.06);
                      border-radius: 24px;
                      text-align: center;
                      cursor: pointer;
                      a {
                        font-size: 14px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: rgba(0, 0, 0, 0.25);
                      }
                    }
                    .buttonItemAct {
                      width: 88px;
                      height: 36px;
                      line-height: 36px;
                      background: #00a6f9;
                      border-radius: 24px;
                      text-align: center;
                      cursor: pointer;
                      a {
                        font-size: 14px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #ffffff;
                      }
                    }
                    .buttonItem {
                      width: 88px;
                      height: 36px;
                      line-height: 36px;
                      background: rgba(0, 0, 0, 0.06);
                      border-radius: 24px;
                      text-align: center;
                      cursor: pointer;
                      a {
                        font-size: 14px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #00a6f9;
                      }
                    }
                  }
                  .line {
                    margin-top: 24px;
                    margin-bottom: 16px;
                    // width: 296px;
                    height: 1px;
                    background: #000;
                    opacity: 0.06;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
